<template>
  <div class="homebox">
    <!-- <div style="margin-bottom:20px">
      <el-date-picker v-model="day" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" type="date"
      @change="changeTime" placeholder="选择日期"></el-date-picker>
    </div> -->
    <div class="itembox" >
      <el-row style="padding-top:40px">
        <el-col :span="10" :offset="1">
          <el-input placeholder="请输入8位凭证码" style="height:60px;border:1px solid #409EFF" v-model="code"> </el-input>
        </el-col>
        <el-col :span="10" :offset="2">
          <el-button type="primary" @click="checkCode" style="height:60px;margin-left: -20px;">凭证码验证</el-button>
          <span v-show="ajaxCodeStatu" style="padding-left:20px;color:red;">{{codeTxt}}</span>
       </el-col>
        <el-col :span="21" :offset="1" style="padding:20px 0" v-show="codeTableData.length>0">
          <el-table :data="codeTableData" border style="width: 100%" >
            
            <el-table-column prop="mobile" label="用户手机" width="180"> </el-table-column>
            <el-table-column prop="product.type" label="类别"> </el-table-column>
            <el-table-column prop="amount" label="消费金额"> </el-table-column>
            <el-table-column prop="product.typeName" label="支付方式">
              <template slot-scope="scope">
              <span v-if="scope.row.channel == 'alipay'">支付宝</span>
              <span v-if="scope.row.channel == 'wxpay'">微信</span>
              <span v-if="scope.row.channel == 'huabei'">花呗</span>
            </template>
            </el-table-column>
            <el-table-column prop="server_tag" label="订单状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0"> 未付款</span>
                <span v-else-if="scope.row.status == 1 " class="red"> 验证成功</span>
                <span v-else-if="scope.row.status == 2" class="red">验证失败</span>
                <span v-else-if="scope.row.status == 3">退款中</span>
                <span v-else-if="scope.row.status == 4">退款成功</span>
                <span v-else-if="scope.row.status == 5">退款失败</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      
<!--        
      <el-row >
        <el-col :span="8">
          <h1 v-if="is_auth" class="fontsize colblur" style="">{{pageView_date}}</h1>
          <h1 v-else class="fontsize colblur" style=""><img style="width:50px" src="../../../assets/B.png" alt=""></h1>
          <div class="txtbox">今日来访量</div>
        </el-col>
        <el-col :span="8">
          <h1  v-if="is_auth" class="fontsize" style="color:#FF9800;">{{reserve_total}}</h1>
          <h1 v-else class="fontsize colblur" style=""><img style="width:50px" src="../../../assets/O.png" alt=""></h1>
          <div class="txtbox">今日预约</div>
        </el-col>
        <el-col :span="8">
          <h1 v-if="is_auth" class="fontsize" style="color:#8BC34A;">{{pageView_Total}}</h1>
          <h1 v-else class="fontsize colblur" style=""><img style="width:50px" src="../../../assets/G.png" alt=""></h1>
          <div class="txtbox">总访问量</div>
        </el-col>
      </el-row> -->
    </div>

    
    
    <div class="itembox info">
      <div style="margin-bottom:10px"><span class="radiou"></span><span>今日预约</span></div>
       <!-- <div v-if="is_auth" style="padding-left:26px;"> 修改了 把显示条件注释调了 显示条件 -->
       <div style="padding-left:26px;">
        <el-table :data="tableData" border style="width: 100%">
          
          <el-table-column prop="time" label="预约时间" width="180">
            <template slot-scope="scope">{{timeFun(scope.row.time)}} </template>
          </el-table-column>
          <el-table-column prop="tel" label="手机" width="180"> </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="server_tag" label="商品名"> </el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope='scope'>
              <span v-if="scope.row.status == 0">未到店</span>
              <span v-else-if="scope.row.status == 1">已到店</span>
              <span v-else-if="scope.row.status == 2">取消预约</span>
              <span v-else-if="scope.row.status == 3">已过期</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div>
                <el-button class="addBtn" v-if="scope.row.status == 0" type="primary" @click="seachFun(scope.row.id)">到店</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <div v-else style="padding-left:26px;">
        <div>认证后才可接受预约 <span class='handers' @click="goResere">去认证</span></div> 
      </div> -->
    </div>

    <div class="itembox info">
      <div style="margin-bottom:10px"><span class="radiou"></span><span>新消息</span></div>
      <div>
        <div v-if="!is_auth" style="padding-left:26px;">
          <div style="margin-bottom:20px">牙记提醒：您的门店还未认证， <span class='handers' @click="goResere">去认证</span></div> 
          <div>牙记提醒：请完善您的门店信息，牙记审核通过后将在app上线， <span class='handers' @click="goInfo">去完善</span></div> 
        </div>
        <div v-for="(item,index) in msgDate" :key="index" class="msgLine"> 
          <span>{{item.message}}</span>
          <div style="color:#ccc;margin:5px">{{timeFun(item.createTime)}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Http from '@/Http/Http'
  import getTime from '@/Http/getTime'
  export default {
    data() {
      return {
        day:'2018-10-23',
        pushStatus:false,
        value:'关注',
        is_auth:0,
        dataPush:'',
        pageView_Total:0,
        pageView_date:0,
        reserve_total:0,
        totla:200,
        obj:'',
        msgDate:[],
        codeTableData:[],
        code:'', //凭证吗
        tableData: [{name:'2'}],
        ajaxCodeStatu:false,
        codeTxt:''
      }
    },
    created(){
      this.is_auth = Number(sessionStorage.getItem('is_auth'));
      this.day =Math.round(new Date() / 1000)
      this.getlist()
    },
    
    methods: {
      getlist(){
        const now =  new Date(Math.round(new Date()))
        const year = now.getFullYear();
        const month = now.getMonth()+1;
        const date = now.getDate();  
        this.day = `${year}-${month}-${date}`;
        Http.getHomeData()
          .then(res =>{
          this.is_auth = res.data.data.is_cert
          sessionStorage.setItem('is_auth',res.data.data.is_cert);
          this.pageView_Total = res.data.data.pageView_Total
          this.pageView_date = res.data.data.pageView_date
          this.reserve_total = res.data.data.reserve_total
          
        })  
        Http.getnewMsg()  
          .then(res =>{
          this.msgDate = res.data.data
          console.log(res.data)
        })
        Http.gettodayReserve()  
          .then(res =>{
          this.tableData = res.data.data.rows
          console.log(res.data)
        })
        
        this.pushStatus = false
      },
      timeFun(row) {
        let val =  getTime(row);
        val = val.split(' ');
        return val[1]
      },
      checkCode(){
        console.log(1221)
        if (this.code.length != 8 && isNaN(this.code)) {
          this.$message.error('验证码不正确')
          return
        }
        Http.checkCode(this.code)
        .then(res =>{
          if(res.data.code == 200){
            this.codeTableData.push(res.data.data)
            this.$message.suceess('验证成功')
          } else{

            this.ajaxCodeStatu = true;
            this.codeTxt = res.data.message;
          }
        })
      },
      //到店
      seachFun(id) {
         this.$confirm(`确认到店？`)
        .then(_ => {
          
          Http.goHome({"id":id})
          .then( res => {
            if (res.data.code == 200) {
              this.$message.success('到店成功')
              this.getlist()
            } else if(res.data.code == -1003) {
              this.$message.error(`请求失败原因：${res.data.message}`)
            } else {
              this.$message.error('到店失败')}
          })
          .catch( error => {
            console.log(error)
            this.$message.error('服务器请求失败')
          })
        })
        .catch(_ => {
          //取消部分
          console.log('bb')
        });
      },
     
      changeTime(){
        Http.getHomeData({date:this.day})
          .then(res =>{
          this.pageView_Total = res.data.data.pageView_Total
          this.pageView_date = res.data.data.pageView_date
          this.reserve_total = res.data.data.reserve_total
        })  
      },
      goResere(){
        this.$router.push('Resere')
      },
      goInfo(){
        this.$router.push('Information')
      },
      //选择 推荐
      handleSelectionChange() {
        
      },
    }
  }
</script>
<style  scoped>
.homebox{
  min-width: 700px;
  padding:10px;
  width: 70%
}
.itembox{
  margin-bottom: 50px;
  background: #fff;
  min-height: 200px
}

.fontsize{
  font-size: 34px;
  margin:34px 0 20px 0;
}
.txtbox{
  margin-bottom:34px;
}
.radiou{
  width: 16px;
  height: 16px;
  display: inline-block;
  background: #F97171;
  border-radius: 8px;
  position: relative;
  top:2px;
  margin-right: 10px;
}
.info{
  padding: 20px;
}
.colblur{
  color:#6BC3FB;
}
.colhui{
  color:#949494;
  margin:5px 0;
}
.handers{
  color:#83C1F7; 
  text-decoration: underline;
  cursor:pointer
}
.msgLine{
  padding:20px 0 20px 26px;
  border-bottom:1px solid #ebeef5;

}
</style>
